<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
      
    </div>

    <template id="lkBox">
        <div style="background-color: antiquewhite; width: 200px; height: 200px;">
             <div>参数1：{{num1}}</div>
             <div>参数2：{{num2}}</div>
             <div>参数3：{{num3}}</div>
             <div>参数4：{{num4}}</div>
        </div>
        
    </template>

</body>
<script src="js/vue.js"></script>
<script>
    const lkBox = {
        data() {
           return {
           }
        },
        props: ['num1', 'num2', 'num3', 'num4'], 
        template: `#lkBox`,
    };


    const app = Vue.createApp({
        data() {
            return {
                num1: 100,
                num2: 200,
                num3: 300,
                num4: 400,
                // 这里使用一个对象将所有的传参值组装到一起
                numObj: {
                    num1: 100,
                    num2: 200,
                    num3: 300,
                    num4: 400,
                }
            }
        },
        components: {
            "lk-box": lkBox,
        },
        template: `
            <lk-box :num1="num1" :num2="num2" :num3="num3" :num4="num4"></lk-box>
            <p>-------------------------</p>
            <!--  这里的v-bind 是没有 : 的 (不用写成 :v-bind) -->
            <lk-box v-bind="numObj"></lk-box>
        `
    }).mount("#app");
</script>

</html>